<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      textarea {
        width: 100%;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h3>b页面</h3>
    <textarea></textarea>
    <button>发送</button>
    <div class="infoBox"></div>
  </body>
  <script>
    const bc = new BroadcastChannel('channel');
    const textarea = document.querySelector('textarea');
    const btn = document.querySelector('button');
    const infoBox = document.querySelector('.infoBox');
    
    function addMsg(msg) {
      const p = document.createElement('p');
      p.innerHTML = `${msg.type}:${msg.content}`;
      infoBox.append(p);
    }
    
    btn.addEventListener('click', () => {
      const msg = {
        type: 'b',
        content: textarea.value
      };
      bc.postMessage(msg);
      textarea.value = '';
      addMsg(msg);
    })
    bc.onmessage = (event) => {
      console.log(event)
      addMsg(event.data);
    }
  </script>
</html>